<template>
	<view>
		<tn-nav-bar fixed :backTitle="backTitle">{{ title }}</tn-nav-bar>
		<view class="content" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

				<tn-swiper :list="bannerList" :height="400" :radius="0" mode="none"></tn-swiper>
				<view class="white_bgColor">
					<view class="xingzu_padding">
						<u--input placeholder="搜索星族圈素材关键词" prefixIcon="search" @input="changeSearch" prefixIconStyle="font-size: 22px;color: #808080;" class="search"></u--input>
						<u-tabs :list="tabsList"  lineWidth="10" lineHeight="5" :current="currentIndex"
							:activeStyle="{color: '#FE0000'}"
							:inactiveStyle="{color: '#939496'}"
							 @change="tabChange"
							:lineColor="`url('/pages/users/static/xingzu/tabs.png') 100% 100%`">
							<view slot="right" style="padding-left: 4px;" @tap="handleSlot">
								<text class="tn-icon-down"></text>
							</view>
						</u-tabs>
					</view>
					<view class="xingzu_padding">
						<view class="eject" v-show="isShow">
							<view class="eject_box" v-for="(item, index) in tabsList" :key="item.name" @click="handledTabs(item, index)">{{ item.name }}</view>
						</view>
						<view class="xingzu_tags">
							<tn-tag :backgroundColor="newBgColor" :fontColor="newFontColor" shape="radius" width="69px" height="28px" @click="changeColor(0)">
								<u--image :showLoading="true" :src="newImg" width="12px" height="14px"></u--image>
								<span style="margin-left: 3px;">最新</span>
							</tn-tag>
							<tn-tag :backgroundColor="hotBgColor" :fontColor="hotFontColor" shape="radius" width="69px" height="28px" style="margin-left: 16px;"  @click="changeColor(1)">
								<u--image :showLoading="true" :src="hotImg" width="12px" height="14px" style="margin-right: 3px;"></u--image>
								<span style="margin-left: 3px;">最热</span>
							</tn-tag>
						</view>
					</view>
				</view>
				<scroll-list ref="list" class="scroll_list" :option="option" @load="load" @refresh="refresh">
					<detailsList :datalist="list" />
				</scroll-list>
			</scroll-list>
		</view>
	</view>
</template>

<script>
import detailsList from './components/detailsList.vue'
import { getMenuTabsList, getDetailsList } from '@/pages/users/xingzu/config/api.js'

export default {
	components: {
		detailsList
	},
	data() {
		return {
			title: '',
			backTitle: '',
			selectName: '',
			searchTitle: '',
			timer: null,
			id: null,
			isShow: false,
			current: 0,
			currentIndex: 0,
			newImg: require('@/pages/users/static/xingzu/newSelect.png'),
			hotImg: require('@/pages/users/static/xingzu/hot.png'),
			newBgColor: '#FE0000',
			newFontColor: '#FFFFFF',
			hotBgColor: '#F2F2F2',
			hotFontColor: '#808080',
			bannerList: [],
			tabsList: [],

			option: {
				size: 10,
				auto: false,
				showEmpty: false
			},
			list: [],
		}
	},
	onLoad(option) {
		this.id = option.id
		this.getTabs()
	},
	methods: {
		handleSlot() {
			this.isShow = !this.isShow
		},
		tabChange(e) {
			this.selectName = e.name
			this.isShow = false

			this.getList(1, 10, true)
		},
		getTabs() {
			const params = {
				pid: this.id
			}
			getMenuTabsList(params).then(res => {
				this.title = res.data.name
				this.bannerList = []
				this.bannerList.push({image: res.data.cover})
				this.tabsList = res.data.articles
				this.selectName = this.tabsList[0].name

				this.getList(1, 10, true)
			})
		},
		changeColor(current) {
			this.current = current
			this.getList(1, 10, true)
			if(current === 0) {
				this.newImg = require('@/pages/users/static/xingzu/newSelect.png')
				this.hotImg = require('@/pages/users/static/xingzu/hot.png')
				this.newBgColor = '#FE0000'
				this.newFontColor = '#FFFFFF'
				this.hotBgColor = '#F2F2F2'
				this.hotFontColor = '#808080'
			} else {
				this.newImg = require('@/pages/users/static/xingzu/new.png')
				this.hotImg = require('@/pages/users/static/xingzu/hotSelect.png')
				this.hotBgColor = '#FE0000'
				this.hotFontColor = '#FFFFFF'
				this.newBgColor = '#F2F2F2'
				this.newFontColor = '#808080'
			}
		},
		handledTabs(e, index) {
			this.selectName = e.name
			this.isShow = false
			this.currentIndex = index

			this.getList(1, 10, true)
		},
		changeSearch(e) {
			clearTimeout(this.timer)
			this.timer = setTimeout(() => {
				this.searchTitle = e

				this.getList(1, 10, true)
			}, 500)
		},

		getList(pageNo, pageSize, isRefresh) {
			let sort = ''
			if(this.current === 0) {
				sort = '1'
			} else {
				sort = '2'
			}
			const params = {
				name: this.selectName,
				page: pageNo,
				limit: pageSize,
				title: this.searchTitle,
				id: this.id,
				sort: sort
			}
			getDetailsList(params).then(res => {
				if(isRefresh) {
					this.list = []
				}
				res.data.list[0].articles.forEach(item => {
					item.image = item.cover
					this.list.push(item)
				})
				this.$refs.list.loadSuccess({ list: this.list, total: res.data.total });
			}).catch(err => {
				this.$refs.list.refreshFail()
			})
		},
		load(paging) {
			this.getList(paging.page, paging.size, false)
		},
		refresh(paging) {
			this.getList(paging.page, paging.size, true)
			this.$refs.list.refreshSuccess({ list: this.list, total: 10 });
		}
	}
}
</script>

<style>
page {
	background-color: #F6F6F6;
}
</style>

<style lang="scss" scoped>
.white_bgColor {
	background-color: #FFFFFF;
}
.xingzu_padding {
	padding: 4px 16px;
}
.search {
	background-color: #F2F2F2;
	margin-top: 10px;
	border: none;
}
.title_color {
	color: #1A1A1A;
}
.content_color {
	color: #808080;
}
.eject {
	width: 35%;
	background-color: #FFFFFF;
	float: right;
	position: absolute;
	right: 16px;
	z-index: 10;
	text-align: center;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
	color: #1A1A1A;
}
.eject_box {
	padding: 8px 0;
}
.eject_box:not(:last-child) {
	border-bottom: 0.5px solid #EEEEEE;
}
.xingzu_tags {
	margin-top: 6px;
	padding-bottom: 10px;
}
</style>
